<template>
  <div class="preview-container">
    <!-- 弹出层题目预览 -->
    <el-dialog
      title="题目预览"
      append-to-body
      :before-close="handleClose"
      :visible.sync="isShow"
      width="68%"
    >
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content">
            【题型】:{{ getList.questionType }}题
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content">【编号】:{{ getList.id }}</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content">
            【难度】:{{ getList.difficulty }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content">【标签】:{{ getList.tags }}</div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content">
            【学科】:{{ getList.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content">
            【目录】:{{ getList.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content">
            【方向】:{{ getList.direction }}
          </div></el-col
        >
      </el-row>
      <hr />
      <div class="grid-content">【题干】:</div>
      <div
        class="grid-content"
        style="color: blue"
        v-html="getList.question"
      ></div>
      <div v-if="getList.questionType !== '简答'" class="grid-content">
        {{ getList.questionType }}题 选项：（以下选中的选项为正确答案）
      </div>
      <div class="options">
        <el-radio-group v-if="getList.questionType === '单选'" :value="isRight">
          <el-radio
            class="radio"
            v-for="item in getList.options"
            :key="item.id"
            :label="item.isRight"
          >
            {{ item.code }}:{{ item.title }}
          </el-radio>
        </el-radio-group>
        <div v-else-if="getList.questionType === '多选'">
          <el-checkbox
            class="radio"
            v-for="item in getList.options"
            :key="item.id"
            :value="item.isRight === 1"
          >
            {{ item.code }}:{{ item.title }}
          </el-checkbox>
        </div>
      </div>
      <hr />
      <div class="grid-content">
        【参考答案】:
        <el-button type="danger" @click="preview">视频答案预览</el-button>
        <div v-if="isEite">
          <video
            width="320px"
            height="240px"
            :src="getList.videoURL"
            controls
          ></video>
        </div>
      </div>
      <hr />
      <div class="grid-content" v-html="'【答案解析】:' + getList.answer"></div>
      <hr />
      <div class="grid-content">
        【题目备注】: {{ getList.remarks ? getList.remarks : "无" }}
      </div>
      <el-button text-align="right" type="primary" @click="handleClose"
        >关闭</el-button
      >
    </el-dialog>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
const questionType = [
  '单选', '多选', '简答'
]
const difficulty = [
  '简单', '一般', '困难'
]
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    queId: {
      type: Number
    }
    // isShow: {
    //   type: Boolean,
    //   default: false
    // }
  },
  name: 'PreviewContainer',
  data () {
    return {
      getList: {},
      isRight: 1,
      isEite: false
    }
  },
  methods: {
    // 获取渲染数据
    async detail (id) {
      console.log(id)
      // console.log(this.item.id)
      const { data } = await detail({ id: id.id })
      data.questionType = questionType[data.questionType - 1]
      data.difficulty = difficulty[data.difficulty - 1]
      this.getList = data
      console.log(this.getList)
    },
    // 点击播放按钮
    preview () {
      this.isEite = !this.isEite
    },
    // 处理关闭按钮
    handleClose () {
      this.$emit('update:isShow', false)
    }
  },
  watch: {
    isShow: {
      handler (newVal, oldVal) {
        this.detail({ id: this.queId })
      },
      immediate: true
    }
  }

}
</script>

<style scoped lang='less'>
.el-row {
  font-size: 14px;
  text-align: left;
}
.grid-content {
  border-radius: 4px;
  min-height: 30px;
}
// 控制单选按钮的样式
.radio {
  // 转换为块级元素
  display: block;
  // 设置下外边距
  margin-bottom: 20px;
}
</style>
